<template>
	<div class="wrapper">
		<div class="user-center">
			<div class="user-header">
				<img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="avatar">
				<div class="user-info">
					<h3></h3>
				</div>
			</div>

			<div class="user-menu">
				<div class="menu-item" @click="$router.push('/passwordChange')">
					<span>修改密码</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item" v-show="isBusinessUser" @click="toMyStores">
					<span>我的店铺</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item">
					<span>设置个人信息</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item">
					<span>我的订单</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item" @click="toWallet">
					<span>电子钱包</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item" @click="toUserAddress">
					<span>收货地址管理</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item">
					<span>关于我们</span>
					<i class="iconfont icon-arrow-right"></i>
				</div>

				<div class="menu-item logout-btn" @click="handleLogout">
					<span>退出登录</span>
				</div>

			</div>
		</div>
		<Footer></Footer>
	</div>
</template>


<script>
	import axios from 'axios';
	import Footer from '../components/Footer.vue';
	export default {
		data() {
			return {
				isBusinessUser: true, // 控制是否显示“我的店铺”
				isLoading: false, // 加载状态（可选）
				errorMsg: '' // 错误信息（可选）
			};
		},
		components: {
			Footer
		},
		methods: {
			// 检查权限的异步方法（同上）
			async checkBusinessPermission() {
				this.isLoading = false;
				this.errorMsg = '';
				try {
					// 从 localStorage 获取 Token（根据实际情况调整）
					const token = localStorage.getItem('id_token');
					const response = await axios.get('user', {
						headers: {
							Authorization: `Bearer ${token}` // 正确方式：不包含额外引号
						} // 注入 Token
					});
					console.log()
					//检查是否有 BUSINESS 权限
					this.isBusinessUser = response.data.data.authorities.some(
						item => item.name === 'BUSINESS'
					);


				} catch (error) {
					console.error('权限检查失败:', error);
					this.errorMsg = '权限获取失败';
					this.isBusinessUser = false;
				} finally {
					this.isLoading = false;

				}
			},
			handleLogout() {
				localStorage.removeItem('id_token');
				this.$router.push('/login');
			},
			toMyStores() {
				this.$router.push('/storeManagement');
			},
			toUserAddress() {
				this.$router.push({
					path: '/userAddress'
				});
			},
			toWallet() {
				this.$router.push({
					path: '/wallet'
				});
			},
		},
		// 关键：组件挂载时自动调用
		mounted() {
			this.checkBusinessPermission();
		}
	};
</script>

<style scoped>
	.user-center {
		padding-bottom: 60px;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.user-header {
		background-color: #0097ff;
		color: #fff;
		padding: 20px;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, 0.5);
		margin-right: 15px;
	}

	.user-info h3 {
		font-size: 18px;
		margin-bottom: 5px;
	}

	.user-info p {
		font-size: 14px;
		opacity: 0.9;
	}

	.user-menu {
		margin-top: 10px;
		background-color: #fff;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
		font-size: 16px;
		user-select: none;
		cursor: pointer;
	}

	.menu-item .iconfont {
		color: #999;
		font-size: 18px;
	}

	.logout-btn {
		color: #ff4d4f;
		margin-top: 20px;
		user-select: none;
		cursor: pointer;
	}
</style>